<template>
  <div class="order-filter">
    <!-- 搜索和筛选 -->
    <div class="filter-controls">
      <div class="search-section">
        <el-input
          v-model="searchValue"
          placeholder="搜索订单号、发件人、收件人或地址"
          clearable
          @input="handleSearch"
          @clear="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <div class="filter-section">
        <el-select
          v-model="statusValue"
          placeholder="筛选状态"
          clearable
          @change="handleFilter"
        >
          <el-option label="全部状态" value="" />
          <el-option label="待发货" :value="1" />
          <el-option label="运输中" :value="2" />
          <el-option label="已送达" :value="3" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

interface Props {
  search: string
  status: number | ''
}

interface Emits {
  (e: 'update:search', value: string): void
  (e: 'update:status', value: number | ''): void
  (e: 'search', query: string): void
  (e: 'filter', status: number | ''): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const searchValue = ref(props.search)
const statusValue = ref(props.status)

// 监听外部变化
watch(() => props.search, (newVal) => {
  searchValue.value = newVal
})

watch(() => props.status, (newVal) => {
  statusValue.value = newVal
})

const handleSearch = () => {
  emit('update:search', searchValue.value)
  emit('search', searchValue.value)
}

const handleFilter = () => {
  emit('update:status', statusValue.value)
  emit('filter', statusValue.value)
}
</script>

<style scoped>
.order-filter {
  margin-bottom: 24px;
}

.filter-controls {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-section {
  flex: 1;
}

.filter-section {
  min-width: 150px;
}

@media (max-width: 768px) {
  .filter-controls {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-section,
  .filter-section {
    width: 100%;
  }
}
</style> 